// pages/detail/detail.js
Page({
  data: {
    recipeId: null,
    recipeDetail: {},
    comments: [],
    relatedRecipes: [],
    isLiked: false,
    isCollected: false,
    isFollowed: false
  },

  onLoad(options) {
    const { id, type } = options;
    this.setData({
      recipeId: id
    });
    
    this.loadRecipeDetail(id);
    this.loadComments(id);
    this.loadRelatedRecipes(id);
    this.checkUserStatus(id);
  },

  // 加载菜谱详情
  loadRecipeDetail(id) {
    // 模拟API请求
    setTimeout(() => {
      const mockDetail = {
        id: id,
        title: '红烧肉',
        imageUrl: 'https://picsum.photos/800/600?random=1',
        views: 12345,
        likes: 567,
        comments: 89,
        authorName: '美食达人',
        authorAvatar: 'https://picsum.photos/60/60?random=1',
        authorDesc: '专注川菜制作，分享地道川菜做法',
        tags: ['川菜', '红烧', '家常菜'],
        cookTime: 45,
        difficulty: '中等',
        servings: 4,
        calories: 350,
        ingredients: [
          { name: '五花肉', amount: '500g' },
          { name: '生抽', amount: '2勺' },
          { name: '老抽', amount: '1勺' },
          { name: '料酒', amount: '2勺' },
          { name: '冰糖', amount: '30g' },
          { name: '葱姜蒜', amount: '适量' }
        ],
        steps: [
          {
            title: '准备食材',
            description: '将五花肉切成3cm见方的块，葱姜蒜切好备用。',
            imageUrl: 'https://picsum.photos/300/200?random=10',
            tips: '五花肉最好选择肥瘦相间的，这样口感更好。'
          },
          {
            title: '焯水',
            description: '锅中加水烧开，放入五花肉焯水，去除血水和杂质。',
            imageUrl: 'https://picsum.photos/300/200?random=11',
            tips: '焯水时加入料酒和姜片，可以去除腥味。'
          },
          {
            title: '炒糖色',
            description: '锅中放油，加入冰糖小火炒至焦糖色，注意不要炒糊。',
            imageUrl: 'https://picsum.photos/300/200?random=12',
            tips: '炒糖色时要小火慢炒，颜色变深即可。'
          },
          {
            title: '炖煮',
            description: '加入五花肉翻炒上色，加入调味料和适量水，大火烧开后转小火炖煮40分钟。',
            imageUrl: 'https://picsum.photos/300/200?random=13',
            tips: '炖煮时水要没过肉块，中途可以翻动几次。'
          },
          {
            title: '收汁',
            description: '大火收汁，汤汁浓稠时即可出锅。',
            imageUrl: 'https://picsum.photos/300/200?random=14',
            tips: '收汁时要注意火候，避免糊锅。'
          }
        ],
        nutrition: [
          { name: '蛋白质', value: '25g' },
          { name: '脂肪', value: '30g' },
          { name: '碳水化合物', value: '5g' },
          { name: '热量', value: '350kcal' }
        ]
      };

      this.setData({
        recipeDetail: mockDetail
      });
    }, 500);
  },

  // 加载评论
  loadComments(id) {
    setTimeout(() => {
      const mockComments = [
        {
          id: 1,
          authorName: '用户A',
          avatar: 'https://picsum.photos/40/40?random=1',
          content: '按照步骤做了一次，味道很不错！',
          time: '2小时前',
          likes: 12,
          isLiked: false
        },
        {
          id: 2,
          authorName: '用户B',
          avatar: 'https://picsum.photos/40/40?random=2',
          content: '糖色炒得有点过了，下次要注意火候。',
          time: '5小时前',
          likes: 8,
          isLiked: true
        },
        {
          id: 3,
          authorName: '用户C',
          avatar: 'https://picsum.photos/40/40?random=3',
          content: '第一次做红烧肉，很成功，感谢分享！',
          time: '1天前',
          likes: 15,
          isLiked: false
        }
      ];

      this.setData({
        comments: mockComments
      });
    }, 800);
  },

  // 加载相关推荐
  loadRelatedRecipes(id) {
    setTimeout(() => {
      const mockRelated = [
        {
          id: 101,
          title: '糖醋里脊',
          imageUrl: 'https://picsum.photos/200/150?random=20'
        },
        {
          id: 102,
          title: '宫保鸡丁',
          imageUrl: 'https://picsum.photos/200/150?random=21'
        },
        {
          id: 103,
          title: '麻婆豆腐',
          imageUrl: 'https://picsum.photos/200/150?random=22'
        },
        {
          id: 104,
          title: '水煮鱼',
          imageUrl: 'https://picsum.photos/200/150?random=23'
        }
      ];

      this.setData({
        relatedRecipes: mockRelated
      });
    }, 1000);
  },

  // 检查用户状态
  checkUserStatus(id) {
    // 模拟检查用户是否点赞、收藏、关注
    setTimeout(() => {
      this.setData({
        isLiked: Math.random() > 0.5,
        isCollected: Math.random() > 0.5,
        isFollowed: Math.random() > 0.5
      });
    }, 300);
  },

  // 返回
  onBack() {
    wx.navigateBack();
  },

  // 点赞
  onLike() {
    const isLiked = !this.data.isLiked;
    const likes = this.data.recipeDetail.likes + (isLiked ? 1 : -1);
    
    this.setData({
      isLiked: isLiked,
      'recipeDetail.likes': likes
    });

    wx.showToast({
      title: isLiked ? '已点赞' : '已取消点赞',
      icon: 'success'
    });
  },

  // 收藏
  onCollect() {
    const isCollected = !this.data.isCollected;
    
    this.setData({
      isCollected: isCollected
    });

    wx.showToast({
      title: isCollected ? '已收藏' : '已取消收藏',
      icon: 'success'
    });
  },

  // 关注作者
  onFollow() {
    const isFollowed = !this.data.isFollowed;
    
    this.setData({
      isFollowed: isFollowed
    });

    wx.showToast({
      title: isFollowed ? '已关注' : '已取消关注',
      icon: 'success'
    });
  },

  // 分享
  onShare() {
    wx.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']
    });
  },

  // 评论
  onComment() {
    wx.showModal({
      title: '写评论',
      editable: true,
      placeholderText: '分享你的制作心得...',
      success: (res) => {
        if (res.confirm && res.content) {
          const newComment = {
            id: Date.now(),
            authorName: '我',
            avatar: 'https://picsum.photos/40/40?random=999',
            content: res.content,
            time: '刚刚',
            likes: 0,
            isLiked: false
          };

          const comments = [newComment, ...this.data.comments];
          const commentCount = this.data.recipeDetail.comments + 1;

          this.setData({
            comments: comments,
            'recipeDetail.comments': commentCount
          });

          wx.showToast({
            title: '评论成功',
            icon: 'success'
          });
        }
      }
    });
  },

  // 点赞评论
  onLikeComment(e) {
    const commentId = e.currentTarget.dataset.id;
    const comments = this.data.comments.map(comment => {
      if (comment.id === commentId) {
        const isLiked = !comment.isLiked;
        return {
          ...comment,
          isLiked: isLiked,
          likes: comment.likes + (isLiked ? 1 : -1)
        };
      }
      return comment;
    });

    this.setData({
      comments: comments
    });
  },

  // 回复评论
  onReplyComment(e) {
    const commentId = e.currentTarget.dataset.id;
    wx.showModal({
      title: '回复评论',
      editable: true,
      placeholderText: '写下你的回复...',
      success: (res) => {
        if (res.confirm && res.content) {
          wx.showToast({
            title: '回复成功',
            icon: 'success'
          });
        }
      }
    });
  },

  // 相关推荐点击
  onRelatedTap(e) {
    const id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: `/pages/detail/detail?id=${id}`
    });
  },

  // 开始制作
  onStartCook() {
    wx.navigateTo({
      url: `/pages/cook/cook?id=${this.data.recipeId}`
    });
  },

  // 分享给朋友
  onShareAppMessage() {
    return {
      title: this.data.recipeDetail.title,
      path: `/pages/detail/detail?id=${this.data.recipeId}`,
      imageUrl: this.data.recipeDetail.imageUrl
    };
  },

  // 分享到朋友圈
  onShareTimeline() {
    return {
      title: this.data.recipeDetail.title,
      imageUrl: this.data.recipeDetail.imageUrl
    };
  }
});